<!-- 导航 显示 或 隐藏的按钮 -->
<template>
	<div class="pull" @click="toggle()">
		<span class="bg" :style="'border-right-color:' + BgColor"></span>
		<span class="icon iconfont icon-pull" :style="'color:' + FontColor"></span>
	</div>
</template>

<script>
export default {
	props: {
		BgColor: {
			default: "#f6f6f6"
		},
		FontColor: {
			default: "#4f5b6f"
		}
	},
	data(){
		return {}
	},
	methods: {
		/*触发父组件*/
		toggle(){
			this.$emit("toggle");
		}
	}
}
</script>

<style lang="stylus" scoped>
.pull
	width: 20px
	height: 50px
	position: relative
	span
		display: flex
		justify-content: center
		align-items: center
		position: absolute
		width: 100%
		height: 100%
		color: #4f5b6f
		&.bg
			border-right: 20px solid #f6f6f6
			border-top: 8px solid transparent
			border-bottom: 8px solid transparent
			box-sizing: border-box
		&.icon::before
			width: 12px
			overflow: hidden
</style>
